<template>
  <div class="body">
    <div class="container">
      <div class="left">
        <img :src="product.path" alt="" />
      </div>
      <div class="right">
        <div class="title">{{ product.name }}</div>
        <div class="info">
          <div class="address">
            {{ product.province }} - {{ product.city }} - {{ product.county }}
          </div>
          <div class="createTime">{{ product.createTime }}</div>
        </div>
        <div class="description">
          <span>{{ product.description }}</span>
        </div>
        <div class="remain">
          剩余:
          <span style="color: red; font-size: 25px">{{ product.remain }}</span>
          (件)
        </div>
        <div class="saleNumber">
          已卖出:
          <span style="color: red; font-size: 25px">{{
            product.saleNumber
          }}</span>
          (件)
        </div>
        <div class="price">
            <div style="flex: 2"></div>
          <span
            ><span style="color: red; font-size: 35px">￥</span>
            {{ product.price }}</span
          >
          <div style="flex: 1"></div>
        </div>
        <div class="operation">
            <el-button type="primary" class="addCart" icon="el-icon-s-shop" @click="addToCart">加入购物车</el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      product: {},
    };
  },
  methods: {
      addToCart() {
          this.$http({
              url: '/user/addToCart',
              method: 'get',
              params: {
                  productId: this.product.id
              }
          }).then(res => {
              if (res == 1) {
                  this.$message.success('加入购物车成功')
              }else {
                  this.$message.error('加入购物车失败')
              }
          })
      }
  },
  created() {
    let productId = this.$route.query.productId;
    console.log(productId);

    this.$http({
      url: "/product/getProductVoById",
      method: "get",
      params: {
        id: productId,
      },
    }).then((res) => {
      console.log(res);
      this.product = res;
    });
  },
};
</script>


<style scoped>
.body {
  display: flex;
  align-items: center;
}

.container {
  width: 90%;
  margin: auto;
  height: 95%;
  display: flex;
  align-items: center;
}

.left {
  flex: 1;
  display: flex;
  height: 80%;
}

.left img {
  width: 100%;
  height: 100%;
}

.right {
  flex: 1;
  height: 80%;
  display: flex;
  flex-direction: column;
  padding: 40px;
}

.title {
  flex: 2;
  font-size: 40px;
  display: flex;
  align-items: center;
  font-weight: 300;
}

.info {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #909399;
}

.info .address {
  flex: 1;
}

.info .createTime {
  flex: 1;
  text-align: center;
}

.description {
  flex: 2;
  display: flex;
  align-items: center;
}

.remain {
  flex: 1;

}

.saleNumber {
  flex: 1;
}

.price {
  flex: 1;
  font-size: 25px;
  display: flex;
}


.operation {
    flex: 1;
    display: flex;
    align-items: center;
}

.addCart {
    width: 80%;
    margin: auto;
}
</style>